<template>
  <div class="reSou">
    <div class="title">全社热搜</div>
    <div class="main">
      <div class="once" v-for="(v,i) in newdata1" :key="i">
        <span class="orange">{{v.rank}}</span>
        <span class="content">{{v.content}}</span>
      </div>
      <!-- <div class="once">
        <span class="orange">2</span>
        <span class="content">考研成绩</span>
      </div>
      <div class="once">
        <span class="orange">3</span>
        <span class="content">薄樱初绽时</span>
      </div> -->
      <div class="once" v-for="(v,i) in newdata2" :key="i+'-only'">
        <span class="hui">{{v.rank}}</span>
        <span class="content">{{v.content}}</span>
      </div>
      <!-- <div class="once">
        <span class="hui">5</span>
        <span class="content">崩坏编年史</span>
      </div>
      <div class="once">
        <span class="hui">6</span>
        <span class="content">天元骑英</span>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  created(){
    this.$store.dispatch('getfind_reSou',{url:"/data/dongTai/find_reSou"})
  },
  computed:{
    newdata1(){
      return this.$store.state.find_reSou.data.slice(0,3);
    },
    newdata2(){
      return this.$store.state.find_reSou.data.slice(3,6);
    }
  },
}
</script>

<style scoped>
.reSou {
  min-height: 1.83rem;
  /* background-color: brown; */
  padding: 0.15rem;
}
.reSou .title {
  height: 0.58rem;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: .58rem;
  /* background-color: cadetblue; */
}
.reSou .main{
  min-height: 1.11rem;
  /* background-color: cornflowerblue; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.reSou .main .once{
  width: 49%;
  height: .31rem;
  background-color: rgb(245,245,245);
  border-radius: .03rem;
  line-height: .31rem;
}
.reSou .main .once .content{
  margin-left: .05rem;
}
.reSou .main .once .orange,.reSou .main .once .hui{
  display: inline-block;
  width: .18rem;
  height: .18rem;
  font-size: .12rem;
  font-weight: 700;
  line-height: .18rem;
  text-align: center;
  border-radius: 10%;
  margin: .02rem;
}
.reSou .main .once .orange{
  background-color: rgb(255,242,234);
  color: rgb(244,139,85);
}
.reSou .main .once .hui{
  background-color: rgb(245,245,245);
  color: rgb(135,135,135);
}
</style>